<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 </title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }} {{show}}</p>
    
    <div v-show="show"> hello world </div>
    
    <button @click="handleClick" > check me </button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
      show:true
  },
 methods:{
    handleClick:function(){
       this.show = !this.show;
       setTimeout(this.handleClick, 1000);
    }
 }
})
</script>
</body>
</html>


<!-- 第一次实际运用vue.js实例 -->
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <p>{{ message }} {{show}}</p>
    
    <div v-show="show">
        <div  style="color:white;line-height:50px;position:absolute;z-index:100;left:50%;top:20%;margin-left:-75px;text-align:center;width:150px;height:50px;background-color:#666;font-size:12px;">
            {{message}}
        </div>

     </div>
    
    <button @click="handleClick" > check me </button>
</div>
 
<script>
new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js!',
          show:false
        },
       methods:{
          handleClick:function(){
             this.show = !this.show;
             setInterval(this.handleClicknone, 2000);
          },
          handleClicknone:function(){
             this.show = false;
             
          }
       
       },
       mounted: {

          if (this.message>5) {

            this.handleClick()

          }
              
       },
})
</script>